<template>
    <div>
        <div style="display: flex;flex-direction: column;height: 100vh">
            <mt-header :title="'出库 - '+mvvm.headerText" style="flex: 0 0 7%;">
                <mt-button slot="left" icon="back" @click="back">返回
                </mt-button>
                <mt-button slot="right" @click.native="showOrder(-1)" style="font-size: 30px;margin-right: 10px">＋
                </mt-button>
                <mt-button icon="more" slot="right" @click.native="mvvm.sheetVisible=true"></mt-button>

            </mt-header>
            <!--搜索-->
            <mt-search
                    v-model="searchText"
                    cancel-text="取消"
                    placeholder="旺旺号"
                    style="height: auto"
            >
            </mt-search>
            <!--订单列表-->
            <mt-loadmore :top-method="loadTop" style="flex:1;overflow-y: auto" ref="loadmore">
                <div :class="{'order-item':true,'outStorage':!item.isSend,'fictitious':item.isSend && item.isFictitious}"
                     v-for="(item,index) in orders" style="position: relative">
                    <div @click="showOrder(-2,item)">
                        <div style="display: inline-block;width:100%;">
                            <div style="float:left;color: orange;font-size: 15px">{{index+1}})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>

                            <div style="float:left;color: blue;font-size: 15px">{{item.account}}</div>
                            <div style="float:right;color: red;font-size: 15px">{{item.date.substring(0,10)}}</div>
                        </div>
                        <div style="display: inline-block;width:100%;">
                            <div style="color: red">产&nbsp;&nbsp;品：{{item.product}}</div>
                        </div>
                        <div style="display: inline-block;width:100%;">
                            <div style="width: 50%;color: red;float: left;">实付价：<span
                                    style="color: black">{{item.paidPrice}}</span>
                            </div>
                            <div style="width: 50%;color: red;float: left;">邮费：<span
                                    style="color: black">{{item.postPrice}}</span>
                            </div>
                        </div>
                        <div style="display: inline-block;width:100%;">
                            地&nbsp;&nbsp;址：{{item.address}}
                        </div>
                    </div>

                    <div style="display: inline-block;width:80%">
                        备&nbsp;&nbsp;住：{{item.remark}}
                    </div>
                    <div style="padding:0 5px;float: right;font-size:25px;margin: auto auto"
                         @click="deleteOrder(item.id)">
                        ×
                    </div>
                    <div v-if="item.type==1" style="position:absolute;width: 100%;height: 4px;background-color: deepskyblue;top:0;left: 0">

                    </div>
                </div>

            </mt-loadmore>
        </div>


        <!--添加/修改订单信息模态框-->
        <mt-popup
                class="vue-parent"
                style="width: 100%;height: 100%"
                v-model="mvvm.formDataVisible"
                position="right">
            <div style="width: 100%;height: 100%">
                <mt-header title="美美护肤 - 出库单" style="height: 7%">
                    <mt-button slot="left" icon="back" @click.native="mvvm.formDataVisible=false">返回
                    </mt-button>
                    <mt-button slot="right" @click.native="sendGoods">{{orderStatusText}}</mt-button>
                </mt-header>
                <div style="width: 100%;height: 93%;overflow-y: auto">
                    <form id="addOrderForm" style="overflow-x: hidden">
                        <mt-field style="display: none" v-model="mvvm.orderObj.id"></mt-field>
                        <el-alert
                                title="非淘宝订单填写姓名"
                                type="warning">
                        </el-alert>
                        <mt-field label="旺旺号" placeholder="请输入旺旺号" type="text"
                                  :attr="{ name:'account'}"
                                  v-model="mvvm.orderObj.account"></mt-field>
                        <mt-field label="出库时间" placeholder="请输入出库时间" @click.native="openDatePicker"
                                  :readonly="true" type="datetime"
                                  :attr="{ name:'date'}"
                                  v-model="mvvm.orderObj.date"></mt-field>
                        <mt-field label="红包口令" placeholder="请输入红包口令" type="text" :attr="{ name:'code'}"
                                  v-model="mvvm.orderObj.code">
                            <div class="mint-button mint-button--primary mint-button--small"
                                 style="display: table-cell;vertical-align: middle"
                                 @click="mvvm.orderObj.code=Math.floor(Math.random()*(1000000-100000+1)+100000);">自动生成
                            </div>
                        </mt-field>
                        <el-alert
                                title="非淘宝订单点击【自动生成】按钮"
                                type="warning">
                        </el-alert>
                        <mt-field label="订单号" placeholder="非淘宝订单点自动生成" type="text" :attr="{ name:'orderNumber'}"
                                  :readonly="!status.orderAdd"
                                  v-model="mvvm.orderObj.orderNumber">
                            <div class="mint-button mint-button--primary mint-button--small"
                                 style="display: table-cell;vertical-align: middle"
                                 @click="status.orderAdd ? autoGenerate():''">自动生成
                            </div>
                        </mt-field>
<!--                        <mt-field label="产品" @click.native="mvvm.productVisible=true" placeholder="请输入产品"-->
<!--                                  :readonly="true"-->
<!--                                  type="text" :attr="{ name:'product'}" v-model="mvvm.orderObj.product"></mt-field>-->
                        <input hidden="true"  name="“product" type="text" v-model="mvvm.orderObj.product" readonly="true"/>
                        <div style="display: flex;flex-wrap: wrap;align-items: center;padding: 5px;margin: 5px">
                            <div style="font-size: 17px" @click="mvvm.productVisible=true">产&nbsp;&nbsp;品</div>
                            <el-tag
                                    v-for="tag in selectProducts"
                                    style="margin:2px 5px"
                                    :key="tag.Name"
                                    closable
                                    :disable-transitions="false"
                                    @close="handleClose(tag)"
                                   >
                                {{tag.Name+(tag.Count<=1?'':' × '+tag.Count)}}
                            </el-tag>
                        </div>
                        <mt-field label="实付价" placeholder="请输入实付价" type="number" :attr="{ name:'paidPrice'}"
                                  v-model.number="mvvm.orderObj.paidPrice"></mt-field>

                        <mt-field label="重量" placeholder="请输入重量" type="number" :attr="{ name:'weight'}"
                                  v-model.number="mvvm.orderObj.weight">
                        </mt-field>

                        <!--<mt-field label="礼品价" placeholder="请输入礼品价" type="number" :attr="{ name:'giftPrice'}"-->
                        <mu-select label="请选择地区" filterable v-model="mvvm.orderObj.addressId" full-width
                                   @change="areasSelect" name="address_id" style="margin: 0 5px">
                            <mu-option v-for="city,index in areas" :key="city.area" :label="city.area" :value="city.id"></mu-option>
                        </mu-select>
                        <mt-field label="邮费" placeholder="邮费" type="number" :attr="{ name:'postPrice'}"
                                  v-model="mvvm.orderObj.postPrice">
                            <div class="mint-button mint-button--primary mint-button--small"
                                 style="display: table-cell;vertical-align: middle" @click="computerPostPrice">计算
                            </div>
                        </mt-field>
                        <mt-cell title="是否虚拟">
                            <mt-switch v-model="mvvm.orderObj.isFictitious"></mt-switch>
                        </mt-cell>
                        <mt-field label="备注" placeholder="备注" type="textarea" rows="3" :attr="{ name:'remark'}"
                                  v-model="mvvm.orderObj.remark"></mt-field>

                    </form>
                    <mt-button v-if="mvvm.orderObj.isSend!=1 && mvvm.orderObj.isSend!='1'" type="primary"
                               style="width: 93%;margin: 10px;overflow-x: hidden" @click="outStorage">出 库
                    </mt-button>
                </div>

            </div>
        </mt-popup>
        <!--日期选择-->
        <mt-datetime-picker
                v-model="mvvm.datePicker"
                type="date"
                ref="datepicker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="handleConfirm"
                :endDate="new Date()"
                :startDate="new Date(new Date()-1000*3600*24*30)">
        </mt-datetime-picker>
        <!--header更多-->
        <mt-actionsheet
                :actions="actions"
                cancel-Text=''
                v-model="mvvm.sheetVisible">
        </mt-actionsheet>
        <!--产品选择-->
        <mt-popup
                v-model="mvvm.productVisible"
                position="bottom"
                style=" width:100%"
        >
            <mt-picker :slots="slots" :show-toolbar="true" visible-Item-Count="5" valueKey="name"
                       @change="onPickerChange">
                <div style="display: inline-block;width: 100%">
                    <div style="margin: 10px;font-size: 18px;color: #8D8D8D;float: left" @click="onClearProduct">清空
                    </div>
                    <div style="margin: 10px;text-align: right;font-size: 20px;color: #0000FF;float: right"
                         @click="onSelectEnter">确定
                    </div>
                </div>
            </mt-picker>
        </mt-popup>
        <!--快递选择-->
        <mt-actionsheet
                :actions="transportActions"
                cancel-Text=''
                v-model="mvvm.transportSheetVisible">
        </mt-actionsheet>
    </div>
</template>

<script>
    import {Toast, MessageBox} from 'mint-ui';
    import {dateTOString, dateTimeTOString} from '../../../public/js/tools/DateTimeUtil.js'

    export default {
        data() {
            return {

                status: {
                    orderAdd: true
                },
                // 所有产品
                products: [
                    // {
                    //     id: 1,
                    //     productName: "美白三件套",
                    //     weight: 2,
                    //     category: 205
                    // }
                ],
                // 所有订单
                orders: [
                    //orderBean
                ],
                // 订单实体模型
                orderBean: {
                    id: -1,
                    account: "",
                    date: "",
                    orderNumber: "",
                    product: "",
                    paidPrice: "",
                    isCollate: 0,
                    weight: "",
                    postPrice: 0,
                    isSend: 0,
                    code: "",
                    isFictitious: false,
                    productDetailJson: "",
                    addressId: "",
                    address: "",
                    isClear: "",
                    remark: ""
                },
                // 选中产品
                selectProducts: [
                    // {
                    //     Name:"",
                    //     ProductId:"",
                    //     Count:""
                    // }
                ],
                slots: [
                    {
                        flex: 2,
                        values: [],
                        className: 'slot1',
                        textAlign: 'right'
                    }, {
                        flex: 0.5,
                        divider: true,
                        content: '-',
                        textAlign: 'center',
                        className: 'slot2'
                    },
                    {
                        flex: 3,
                        values: [
                            // {
                            //     id: 1,
                            //     name: "美白三件套"
                            // }
                        ],
                        className: 'slot3',
                        textAlign: 'left'
                    }, {
                        flex: 0.5,
                        divider: true,
                        content: '-',
                        textAlign: 'center',
                        className: 'slot4'
                    }, {
                        flex: 1,
                        values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 18, 20, 25, 30],
                        className: 'slot5',
                        textAlign: "right",
                    }
                ],
                actions: [
                    {
                        name: "当月订单", method: function () {
                            this.getAllOrders(-1)
                        }.bind(this)
                    },
                    {
                        name: "最近30天订单", method: function () {
                            this.getAllOrders(-2)
                        }.bind(this)
                    },
                    {
                        name: "最近60天订单", method: function () {
                            this.getAllOrders(-3)
                        }.bind(this)
                    },
                    {
                        name: "最近90天订单", method: function () {
                            this.getAllOrders(-4)
                        }.bind(this)
                    }
                ],
                // 快递选择
                transportActions: [
                    {
                        name: "中通快递", method: function () {
                            this.setPostage(-1)
                        }.bind(this)
                    },
                    {
                        name: "顺丰快递", method: function () {
                            this.setPostage(-2)
                        }.bind(this)
                    }
                ],
                // 搜索内容
                searchText: "",
                mvvm: {
                    // 快递选择
                    transportSheetVisible: false,
                    productVisible: false,
                    sheetVisible: false,
                    // 订单表单模型与订单实体模型一样
                    formDataVisible: false,
                    orderObj: {
                        id: -1,
                        account: "",
                        date: "",
                        orderNumber: "",
                        product: "",
                        paidPrice: "",
                        isCollate: 0,
                        weight: "",
                        postPrice: 0,
                        isSend: 0,
                        code: "",
                        isFictitious: false,
                        productDetailJson: "",
                        addressId: "",
                        address: "",
                        isClear: "",
                        remark: ""
                    },
                    headerText: "最近30天",
                    datePicker: new Date(),
                },
                // 地区
                areas: [],
                // 搜索计算时间间隔
                timeId: {},
                orderStatusText: "添加",
                // 产品picker
                oldProductPicker: [],
                oldSourcePicker: [],
                // 最近订单类型
                orderCode: -2,
                // 地区邮费
                postArea: {
                    // area:"江苏",
                    // ztPriceRule:"中通邮费",
                    // sfPriceRule:"顺丰邮费"
                }
            }
        },
        watch: {

            orders(value) {
                for (let i = 0; i < value.length; i++) {
                    if (parseInt(value[i].isSend) === 0) {
                        $('#order' + value[i].id).css("background-color", "aqua");
                    } else if (value.isFictitious === true || parseInt(value.isFictitious) === 1) {
                        $('#order' + value[i].id).css("background-color", "darkgray");
                    } else {
                        $('#order' + value[i].id).css("background-color", "white");
                    }

                }
            }
            ,
            searchText(value) {
                var _this = this;
                clearTimeout(this.timeId);
                if (value.length <= 1) {
                    return;
                }

                this.timeId = setTimeout(function () {
                    $('.mint-search-list').css('display', 'none');
                    _this.searchOrder();
                }, 500);

            },
            selectProducts(value) {
                if (value.length === 0) {
                    return;
                }
                // 如果产品输入框为空
                if (!this.mvvm.orderObj.product) {
                    // 清空
                    value.splice(0, value.length, value[value.length - 1]);
                }
                var str = "";
                for (let item of value) {
                    if (item.Count === 1) {
                        str = str + item.Name.concat("+");
                    } else {
                        str = str + item.Name.concat("*", item.Count, "+");
                    }

                }
                str = str.substring(0, str.length - 1);
                this.mvvm.orderObj.product = str;
                this.mvvm.orderObj.productDetailJson = JSON.stringify(value);
            },

            products(value) {
                this.slots[2].values = [];
                for (let i = 0; i < value.length; i++) {
                    if (value[i].category == this.slots[0].values[0].code) {
                        this.slots[2].values.push({id: value[i].id, name: value[i].productName});
                    }
                }
            }
        }
        , methods: {
            /**
             * 标签关闭事件
             */
            handleClose(tag) {
                this.selectProducts.splice(this.selectProducts.indexOf(tag), 1);
            },
            // 地址选择
            areasSelect(value){
                this.postArea = this.areas.filter(item=>{
                    if (item.id == value) {
                        return item;
                    }
                })[0];
                console.log(this.postArea);
                this.mvvm.orderObj.address = this.postArea.area;
            },
            // 日期对话框
            openDatePicker() {
                this.$refs.datepicker.open()
            },
            // 产品清空
            onClearProduct: function () {
                this.selectProducts = [];
                this.$set(this.mvvm.orderObj, 'product', "");
                this.mvvm.productVisible = false;
            }
            ,
            // 日期确认
            handleConfirm: function () {
                this.mvvm.orderObj.date = dateTOString(this.mvvm.datePicker);
            }
            ,
            // 下拉刷新
            loadTop: function () {
                // 获取所有订单
                var _this = this;
                this.getAllOrders(this.orderCode, function () {
                    _this.$refs.loadmore.onTopLoaded();
                });

            }
            ,
            //产品选择change
            onPickerChange: function (picker, values) {
                if (!!this.oldProductPicker[0]) {

                    if (this.oldProductPicker[0].code != values[0].code) {

                        this.slots[2].values = [];

                        for (let i = 0; i < this.products.length; i++) {
                            if (this.products[i].category == values[0].code) {
                                this.slots[2].values.push({
                                    id: this.products[i].id,
                                    name: this.products[i].productName
                                });
                            }
                        }
                    }
                }
                this.oldProductPicker = window.copy(values);

            }
            ,
            // 来源选择change事件
            onSourcePickerChange: function (picker, values) {

                this.oldSourcePicker = window.copy(values);
            }
            ,
            // 产品选择确定按钮
            onSelectEnter: function () {
                var _this = this;
                try {
                    this.selectProducts.map((o, index) => {
                        if (o.ProductId === _this.oldProductPicker[1].id) {
                            o.Count = _this.oldProductPicker[2];
                            _this.selectProducts.splice(index, 1, o);
                            throw ""
                        }
                    });
                } catch (e) {
                    this.mvvm.productVisible = false;
                    return
                }
                this.selectProducts.push({
                    Name: this.oldProductPicker[1].name,
                    ProductId: this.oldProductPicker[1].id,
                    Count: parseInt(this.oldProductPicker[2])
                });
                this.mvvm.productVisible = false;
            }
            ,
            // 来源选择确定按钮
            onSourceSelectEnter: function () {
                this.mvvm.orderObj.sourceText = this.oldSourcePicker[0].key;
                this.mvvm.orderObj.source = this.oldSourcePicker[0].value
                this.mvvm.sourceVisible = false;
            }
            ,
            searchOrder: function () {
                var _this = this;
                this.$http.get(this.$Api.outStorage.searchOutStorage.concat("?account=", this.searchText)).then(function ({data: resp} = res) {
                    if (resp.code === _this.$ResponseCode.ok) {
                        _this.orders = resp.info.data;
                        window.successNotify(Toast, resp.info.msg);
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }
                }.bind(this));
            }
            ,
            /**
             * 保存订单
             * @param code -1为添加，非-1为订单实体对象
             * @param item 订单对象
             */
            showOrder: function (code = -1, item) {
                this.mvvm.datePicker = new Date();
                this.mvvm.orderObj.id = "";
                if (code === -1) {
                    this.status.orderAdd = true;
                    this.mvvm.orderObj = window.copy(this.orderBean);
                    this.mvvm.orderObj.id = -1;
                    this.orderStatusText = "发货";
                    this.selectProducts = [];
                    $('#product_select').val("");
                } else if (code == -2) {
                    this.status.orderAdd = false;
                    // 订单拷贝
                    this.mvvm.orderObj = window.copy2(item);
                    this.orderStatusText = parseInt(this.mvvm.orderObj.isSend) == 1 ? "修改发货" : "发货";
                    $('#product_select').val(this.mvvm.orderObj.addressId);
                    // 匹配来源code相关key
                    this.mvvm.orderObj.sourceText = this.$Dictionary.source.map(o => {
                        if (o.value == parseInt(this.mvvm.orderObj.source)) {
                            return o.key;
                        }
                    })[0];
                    // 产品从文本转已选择产品对象，文本与selectProducts对象关联

                    if (!!this.mvvm.orderObj.productDetailJson) {
                        this.selectProducts = JSON.parse(this.mvvm.orderObj.productDetailJson);
                    } else {
                        this.selectProducts = [];
                    }

                }
                this.mvvm.formDataVisible = true;

            }
            ,
            // 计算邮费
            computerPostPrice: function () {
                if (!!this.mvvm.orderObj.address && !!this.mvvm.orderObj.addressId && !!this.mvvm.orderObj.weight && !!this.postArea) {
                    this.mvvm.transportSheetVisible = true;
                } else {
                    window.failNotify(Toast, "参数不全，无法计算邮费")
                }

            }
            ,
            // code -1 为中通，-2 为顺丰
            setPostage: function (code) {
                var first;
                var next;
                if (code == -1) {
                    var arr = this.postArea.ztPriceRule.split('/')
                    first = parseInt(arr[0]);
                    next = parseInt(arr[1]);
                } else if (code == -2) {
                    var arr = this.postArea.sfPriceRule.split('/')
                    first = parseInt(arr[0]);
                    next = parseInt(arr[1]);
                }
                var weight = parseInt(this.mvvm.orderObj.weight);
                if (weight > 1) {
                    this.mvvm.orderObj.postPrice = first + next * (weight - 1);
                } else {
                    this.mvvm.orderObj.postPrice = first;
                }
            }
            ,
            // 自动生成订单号
            autoGenerate: function () {
                var serialNUmber = "wx" + dateTimeTOString(new Date()).replace(/[-:\s]/g, "");
                this.mvvm.orderObj.orderNumber = serialNUmber;
            }
            ,

            // 出库
            outStorage: function () {
                $('#addOrderForm').validate({
                    rules: {
                        account: {
                            required: true,
                            minlength: 2,
                        },
                        date: {
                            required: true,
                            date: true
                        },
                        product: {
                            required: true,
                            products: true
                        }
                    }
                });
                if (!!$('#addOrderForm').valid()) {
                    this.saveOrder(-1);
                } else {

                }
            }
            ,
            // 发货
            sendGoods: function () {
                $('#addOrderForm').validate({
                    ignore:"",
                    rules: {
                        account: {
                            required: true,
                            minlength: 2,
                        },
                        date: {
                            required: true,
                            date: true,
                        },
                        code: {
                            required: true,
                        },
                        orderNumber: {
                            required: true,
                            minlength: 10,
                            maxlength: 32
                        },
                        product: {
                            required: true,
                            products: true
                        },
                        postPrice: {
                            required: true,
                            min: 1,
                        },
                        paidPrice: {
                            required: true,
                            min: 1,
                            max: 10000
                        },
                        weight: {
                            required: true,
                        },
                        address_id: {
                            required: true,
                        },
                        address: {
                            required: true,
                            minlength: 2,
                        },
                    }
                });
                if (!!$('#addOrderForm').valid()) {
                    this.saveOrder(-2);
                } else {

                }
            }
            ,
            // code -1为出库-2为发货
            saveOrder: function (code) {
                var url;
                if (code === -1) {
                    url = this.$Api.outStorage.outStorageOut;
                } else if (code === -2) {
                    url = this.$Api.outStorage.outStorageSend;
                }
                if (this.status.orderAdd) {

                } else {
                    url = url.concat("?_method=put");
                }
                // 额外数据处理
                if (this.mvvm.orderObj.isFictitious) {
                    this.mvvm.orderObj.isFictitious = 1;
                } else {
                    this.mvvm.orderObj.isFictitious = 0;
                }
                var _this = this;
                this.$http.post(url, this.mvvm.orderObj).then(function ({data: resp} = res) {
                    if (resp.code === _this.$ResponseCode.ok) {
                        window.successNotify(Toast, resp.info.msg);
                        _this.mvvm.formDataVisible = false;
                        _this.getAllOrders(-2);
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }
                }.bind(this));
            }
            ,
            deleteOrder: function (id) {
                var _this = this;
                MessageBox.confirm('确定删除该项妈?').then(action => {
                    //按钮【按钮一】的回调
                    this.$http.delete(this.$Api.outStorage.outStorage, {
                        params:{
                            id:id
                        },
                        headers:{
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then(function ({data: resp} = res) {
                        if (resp.code === _this.$ResponseCode.ok) {
                            _this.getAllOrders(-2);
                            window.successNotify(Toast, resp.info.msg);
                        } else {
                            window.failedNotify(Toast, resp.info.msg);
                        }
                    });
                });
            }
            ,
            /**
             *
             * @param code -1为本月，-2为30天前，-3 为60天前，-4 为90天其余为30天前
             * @param onCallback 回调函数
             */
            getAllOrders: function (code = -2, onCallback) {
                var _this = this;
                this.$http.get(this.$Api.outStorage.outStorages.concat("?code=", code)).then(function ({data: resp} =
                                                                                                           resp) {
                    if (resp.code === _this.$ResponseCode.ok) {
                        _this.orders = resp.info.data;
                        if (!!onCallback) {
                            onCallback()
                        }
                        _this.mvvm.sheetVisible = false;
                        _this.orderCode = code;
                        switch (code) {
                            case -1:
                                _this.mvvm.headerText = "当月订单"
                                break;
                            case -2:
                                _this.mvvm.headerText = "最近30天"
                                break;
                            case -3:
                                _this.mvvm.headerText = "最近60天"
                                break;
                            case -4:
                                _this.mvvm.headerText = "最近90天"
                                break;
                        }

                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }

                }.bind(this));
            }
            ,
            // 获取所有产品系列类别
            getAllProductCategory: function () {
                var _this = this;
                this.$http.get(this.$Api.basic.productCategory.concat("?code=", 2)).then(function ({data: resp} = resp) {
                    if (resp.code == _this.$ResponseCode.ok) {
                        // 获取所有产品信息
                        _this.slots[0].values = resp.info.data.map(function (item) {
                            return {code: item.code, name: item.value}
                        });
                        _this.getAllProducts();
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }

                }.bind(this));
            }
            ,
            /**
             * 获取所有产品
             */
            getAllProducts: function () {
                var _this = this;
                this.$http.get(this.$Api.basic.allProducts).then(function ({data: resp} = res) {
                    if (resp.code === _this.$ResponseCode.ok) {
                        _this.products = resp.info.data;
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }
                }.bind(this));
            }
            ,
            /**
             * 获取所有地区
             */
            getAllAreas: function () {
                var _this = this;
                this.$http.get(this.$Api.basic.allAreas).then(function ({data: resp} = res) {
                    if (resp.code === _this.$ResponseCode.ok) {
                        _this.areas = resp.info.data;
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }
                }.bind(this));
            },
            // 返回
            back() {
                this.$router.go(-1)
            },
            phoneBack() {
                if (this.mvvm.formDataVisible) {
                    this.mvvm.formDataVisible = false;
                } else {
                    this.$router.go(-1)
                }
                if (window.history && window.history.pushState) {
                    history.pushState(null, null, document.URL);
                    window.addEventListener('popstate', this.phoneBack, false);//false阻止默认事件
                }
            }
        }
        ,
        created: function () {
                // 获取所有订单
            this.getAllOrders(-2);
                // 获取产品目录
            this.getAllProductCategory();

            this.getAllAreas();
            jQuery.validator.addMethod("cstdate", function (value, element) {
                var email_number = /^\d{4}-\d{1,2}-\d{1,2}\s\d{2}:\d{2}(:\d{2})?$/
                return this.optional(element) || email_number.test(value);
            }, "<label class='error'>日期格式不正确</label>");
            jQuery.validator.addMethod("products", function (value, element) {
                var email_number = /^([A-Za-z\u4e00-\u9fa5]{1,}(\*\d{1,2})?\+?)+$/
                return this.optional(element) || email_number.test(value);
            }, "<label class='error'>产品格式不正确</label>");

        }, mounted() {
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.phoneBack, false);//false阻止默认事件
            }

        },
        destroyed() {
            window.removeEventListener('popstate', this.phoneBack, false);//false阻止默认事件
        },
    }
</script>

<style scoped>
    .order-item {
        background-color: white;
        padding: 2%;
        margin: 4% 2.5%;
        -webkit-border-radius: 5px;

        -moz-border-radius: 5px;

        border-radius: 5px;

        -webkit-box-shadow: #666 0px 0px 10px;

        -moz-box-shadow: #666 0px 0px 10px;

        box-shadow: #666 0px 0px 10px;
        background-color: white;
    }

    .yd-popup-content {
        background-color: white;
    }

    .outStorage {
        background-color: aqua;
    }

    .sendGoods {
        background-color: white;
    }

    .fictitious {
        background-color: darkgray;
    }
</style>
